<template>
    <div class="text">商品列表</div>
      <el-table
        :data="tableData"
        :border="parentBorder"
        :preserve-expanded-content="preserveExpanded"
        style="width: 100%"
      >
        <el-table-column type="expand">
          <template #default="props">
            <div m="4" class="expxl">
              <p m="t-0 b-2">商品ID: {{ props.row.id }}</p>
              <p m="t-0 b-2">商品名: {{ props.row.name }}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="商品名称" prop="name" />
        <el-table-column label="商品分类" prop="category" />
        <el-table-column label="商品价格" prop="price" />
        <el-table-column label="商品图片" >
            <template #default="props">
           <el-image :src="`${serverUrl}${props.row.imgUrl}`" alt=""/>
          </template >
        </el-table-column>
        <el-table-column label="商品描述" prop="goodsDesc" />
        <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
            编辑
          </el-button>
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
          >
            删除
          </el-button>
          
        </template>
      </el-table-column>
      </el-table>
  
      <div class="demo-pagination-block">
          <el-pagination
                  v-model:current-page="formData.currentPage"
                  v-model:page-size="formData.pageSize"
                  :page-sizes="[5, 10, 15, 20]"
                  :size="size"
                  :disabled="disabled"
                  :background="background"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
          />
      </div>
  
    </template>
    
    <script lang="ts" setup>
    import { ref, reactive } from 'vue'
    import { goodsList } from '../../api/goods'
    import { serverUrl } from '../../utils/common'
    
  interface Goods {
      id: number
      name: string
      category: string
      price: string
      imgUrl: string
      goodsDesc: string
  }
  
  
   const total = ref(0); 
  // 分页相关数据
  const formData = reactive({ 
      currentPage: 1,
      pageSize: 5
  });
  // 当前页发生改变时重新请求接口
  const handleCurrentChange = (val: number) => { 
      formData.currentPage = val;
      getAccountList();
  };
  
  // 每页数据长度发生改变时重新请求接口
  const handleSizeChange = (val: number) => { 
      formData.pageSize = val;
      getAccountList();
  };
  
  const parentBorder = ref(false)
  const preserveExpanded = ref(false)
  const tableData = ref<Goods[]>([])
  
  const getAccountList = async () => {
      try {
          const res = await goodsList(formData);
          tableData.value = res.data;
          total.value = res.total;
      } catch (err) {
          console.log(err);
      }
  }
  
  getAccountList();
  
  const handleEdit = (index: number, row: Goods) => {
      // 编辑逻辑
      console.log('编辑', index, row);
  }
  
  const handleDelete = (index: number, row: Goods) => {
      // 删除逻辑
      console.log('删除', index, row);
  }
    </script>
    
  
  <style scoped>
  .text { 
      font-size: 20px;
      width: 100%;
      height: 50px;
      border-bottom: 2px solid #f0f2f5;
      line-height: 50px;
      margin-bottom: 20px;
  }
  .expxl{
      display: flex;
  }
  p{
          flex: 1;
  }
  .el-image{
    width: 50px;
    height: 50px;
  }
  </style>